<template>
    <div class="vab-nav">
        <!--业务需要的nav-->
        <def-nav></def-nav>
    </div>
</template>

<script lang="ts">
import defNav from '@/layout/nav'
import {Component, Prop} from 'vue-property-decorator';
import BaseVue from "@/common/base-vue";
import {RouterGetterEnum, SettingsGetterEnum} from '@/store/enum/store.enum'

@Component({components: {defNav}})
export default class VabNav extends BaseVue {
    @Prop()
    private layout: string;

    get extra() {
        return this.$store.getters[SettingsGetterEnum.extra]
    };

    get routes() {
        return this.$store.getters[RouterGetterEnum.routes]
    };

    get handlePartialRoutes() {
        const activeMenu = this.routes.find((v) => v.name === this.extra.first)
        return activeMenu ? activeMenu.children : []
    };
}
</script>

<style lang="scss" scoped>
.vab-nav {
    position: relative;
    height: $base-nav-height;
    padding-right: $base-padding;
    padding-left: $base-padding;
    overflow: hidden;
    user-select: none;
    background: $base-color-white;
    box-shadow: $base-box-shadow;

    .left-panel {
        display: flex;
        align-items: center;
        justify-items: center;
        height: $base-nav-height;

        ::v-deep {
            .vab-breadcrumb {
                margin-left: $base-margin;
            }

            .el-tabs {
                margin-left: $base-margin;

                .el-tabs__header {
                    margin: 0;
                }

                .el-tabs__item {
                    > div {
                        display: flex;
                        align-items: center;

                        i {
                            margin-right: 3px;
                        }
                    }
                }
            }

            .el-tabs__nav-wrap::after {
                display: none;
            }
        }
    }

    .right-panel {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: flex-end;
        height: $base-nav-height;

        ::v-deep {
            [class*='ri-'] {
                margin-left: $base-margin;
                color: $base-color-gray;
                cursor: pointer;
            }

            button {
                [class*='ri-'] {
                    margin-left: 0;
                    color: $base-color-white;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
